<template>
  <div
    class="collapse-title"
    v-if="props.title"
    style="font-size: 20px; font-weight: 700"
  >
    {{ props.title }}
  </div>
  <div class="toggle-wrapper" style="display: flex">
    <div
      class="item-container"
      :style="{
        overflow: 'hidden',
        height: height + 'px',
        transition: 'height 0.3s ease 0s',
        width: '100%',
      }"
    >
      <div v-resize="handler" style="display: flex; flex-wrap: wrap">
        <div
          style="
            margin-right: 8px;
            margin-top: 12px;
            font-size: 14px;
            height: 28px;
            letter-spacing: 0;
            padding: 2px 16px;
            cursor: pointer;
            display: block;
            border-radius: 4px;
            line-height: 24px;
          "
          class="items"
          v-for="(item, index) in props.list"
          :key="index"
          @click="clickNode(item)"
        >
          <div>{{ item }}</div>
        </div>
      </div>
    </div>
    <div
      class="open-toggle"
      style="
        position: relative;
        top: 15px;
        width: 64px;
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        letter-spacing: 0px;
        text-align: right;
        cursor: pointer;
      "
      v-show="showBtn"
    >
      <div @click="handleOpen" style="color: var(--el-color-primary)">
        {{ toggle ? '展开' : '收起' }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: '',
  },
})
const height = ref(40)
const resizeH = ref(40)
const showBtn = ref(false)
const toggle = ref(true)
const emits = defineEmits(['clickNode'])
const handleOpen = () => {
  toggle.value = !toggle.value
  toggle.value ? (height.value = 40) : (height.value = resizeH.value)
}
const handler = (resize: any) => {
  resizeH.value = Math.ceil(resize.height)
  showBtn.value = resizeH.value > 40;
}
const clickNode = (word: string) => {
  emits('clickNode', word)
}

</script>
<style scoped lang="scss">
.items {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  &:hover {
    background-color: var(--el-color-primary);
    color: #fff;
  }
}
</style>
